<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改个人信息</title>
<meta name="description"
	content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">

<link href="${basePath}bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="${basePath}bootstrap/css/style.css" rel="stylesheet">
<script src="${basePath}bootstrap/js/jquery.min.js"></script>
<script src="${basePath}bootstrap/js/bootstrap.min.js"></script>
<script src="${basePath}bootstrap/js/scripts.js"></script>
<!--派生选择器设置提示信息的字体颜色-->
<style type="text/css">
div span {
	color: red;
}
</style>
<script type="text/javascript">
	//以下进行用户修改缓存以及表单验证
	$(function() {
		//*********************性别单选框赋值*********************//
		//获取需要绑定事件的控件
		//使用模糊匹配选择器选择 所有的单选框对象，并使用each函数遍历每个单选框对象
		$("input[name^='userSex']").each(function() {
			//给每一个单选框绑定一个自定义名为myOnload的事件
			$(this).bind("myOnload", function() {
				//自定义时间的处理业务
				//获取需要绑定的性别的隐藏属性值（el表达式获取服务器传来的值）
				var val = $("#hiddensex").get(0).value;
				//如果当前正在遍历的单选框的属性值等于服务器传过来的值
				if ($(this).attr("value") == val) {
					//绑定checked属性
					$(this)[0].checked = "checked";

				} else {
					$(this).removeAttr("checked");
				}
			});
			//触发该自定义的事件（自动执行）
			$(this).trigger("myOnload");
		});
	});
	//添加表单验证
	//1.账号非空验证
	function checkAccount() {
		//获取输入的内容
		var userAccount = document.getElementById("userAccount").value;
		//错误提示框信息内容
		var spAccount = document.getElementById("spAccount");
		if (userAccount == null || userAccount == "") {
			//提示信息
			spAccount.innerHTML = "请输入账号！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spAccount.innerHTML = "";
			return true;
		}
	}
	//2.密码非空验证
	function checkPsw() {
		//获取输入的内容
		var userPsw = document.getElementById("userPsw").value;
		//错误提示框信息内容
		var spPsw = document.getElementById("spPsw");
		if (userPsw == null || userPsw == "") {
			//提示信息
			spPsw.innerHTML = "请输入密码！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spPsw.innerHTML = "";
			return true;
		}
	}
	//3.姓名非空验证
	function checkName() {
		//获取输入的内容
		var userName = document.getElementById("userName").value;
		//错误提示框信息内容
		var spName = document.getElementById("spName");
		if (userName == null || userName == "") {
			//提示信息
			spName.innerHTML = "请输入姓名！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spName.innerHTML = "";
			return true;
		}
	}
	//4.身份证号码非空验证
	function checkId() {
		//获取输入的内容
		var userIdnum = document.getElementById("userIdnum").value;
		//错误提示框信息内容
		var spId = document.getElementById("spId");
		if (userIdnum == null || userIdnum == "") {
			//提示信息
			spId.innerHTML = "请输入工号！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spId.innerHTML = "";
			return true;
		}
	}
	//5.性别非空验证
	function checkSex() {
		//获取输入的内容
		var userSex = document.getElementsByName("userSex");
		//设置标识量
		var chSex = false;
		for (var i = 0; i < userSex.length; i++) {
			if (userSex[i].checked) {
				chSex = true;
				break;
			}
		}
		//错误提示框信息内容
		var spSex = document.getElementById("spSex");
		if (!chSex) {
			//提示信息
			spSex.innerHTML = "请选择性别！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spSex.innerHTML = "";
			return true;
		}
	}
	//6.联系方式非空验证
	function checkTel() {
		//获取输入的内容
		var userTel = document.getElementById("userTel").value;
		//错误提示框信息内容
		var spTel = document.getElementById("spTel");
		if (userTel == null || userTel == "") {
			//提示信息
			spTel.innerHTML = "请输入联系方式！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spTel.innerHTML = "";
			return true;
		}
	}
	//7.家庭住址非空验证
	function checkAdd() {
		//获取输入的内容
		var userAddress = document.getElementById("userAddress").value;
		//错误提示框信息内容
		var spAdd = document.getElementById("spAdd");
		if (userAddress == null || userAddress == "") {
			//提示信息
			spAdd.innerHTML = "请输入家庭住址！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spAdd.innerHTML = "";
			return true;
		}
	}
	//8.单位非空验证
	function checkConp() {
		//获取输入的内容
		var userCompany = document.getElementById("userCompany").value;
		//错误提示框信息内容
		var spConp = document.getElementById("spConp");
		if (userCompany == null || userCompany == "") {
			//提示信息
			spConp.innerHTML = "请输入所属单位！";
			//改变标志量
			return false;
		} else {
			//清空提示信息
			spConp.innerHTML = "";
			return true;
		}
	}
	//进行最后的提交验证
	function checkAll() {
		var ischAccount = checkAccount();
		var ischPsw = checkPsw();
		var isName = checkName();
		var ischId = checkId();
		var ischSex = checkSex();
		var ischTel = checkTel();
		var ischAdd = checkAdd();
		var ischConp = checkConp();
		if (ischAccount && ischPsw && isName && ischId && ischSex && checkTel
				&& checkAdd && checkConp) {
			return true;
		} else {
			return false;
		}
	}
</script>
</head>
<body>

	<div id="container" align="center">
		<div style="width: 500px;" align="left">
			<h4 align="center">修改个人信息</h4>
			<form class="form-horizontal" role="form" action="updateUserSelf.do"
				method="post">

				<input type="hidden" id="userIndex" name="userIndex"
					value="${requestScope.userB.userIndex}"> <input
					type="hidden" id="hiddensex" value="${requestScope.userB.userSex}">

				<div class="form-group">
					<label for="inputUserAccount" class="col-sm-2 control-label">账号</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="userAccount"
							id="userAccount" placeholder="账号"
							value="${requestScope.userB.userAccount}"
							onblur="checkAccount();" />
						<div>
							<span id="spAccount"></span>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label for="inputUserPsw" class="col-sm-2 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
					<div class="col-sm-10">
						<input type="password" class="form-control" name="userPsw"
							id="userPsw" placeholder="密码"
							value="${requestScope.userB.userPsw}" onblur="checkPsw();" />
						<div>
							<span id="spPsw"></span>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label for="inputUserName" class="col-sm-2 control-label">姓名</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="userName"
							id="userName" placeholder="姓名"
							value="${requestScope.userB.userName}" onblur="checkName();" />
						<div>
							<span id="spName"></span>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label for="inputUserId" class="col-sm-2 control-label">身份证号</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="userIdnum"
							id="userIdnum" placeholder="身份证号"
							value="${requestScope.userB.userIdnum}" onblur="checkId();" />
						<div>
							<span id="spId"></span>
						</div>
					</div>
				</div>

				<div class="form-group">
					<label for="inputUserSex" class="col-sm-2 control-label">性别</label>
					<div class="col-sm-10">
						<label class="radio-inline"> <input type="radio"
							name="userSex" id="userSex1" value="男" onclick="checkSex();">
							男
						</label> <label class="radio-inline"> <input type="radio"
							name="userSex" id="userSex2" value="女" onclick="checkSex();">
							女
						</label>
						<div>
							<span id="spSex"></span>
						</div>
					</div>
				</div>

				<div class="form-group">
					<label for="inputUserTel" class="col-sm-2 control-label">联系方式</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="userTel"
							id="userTel" placeholder="联系方式"
							value="${requestScope.userB.userTel}" onblur="checkTel();" />
						<div>
							<span id="spTel"></span>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label for="inputUserAdd" class="col-sm-2 control-label">家庭住址</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="userAddress"
							id="userAddress" placeholder="家庭住址"
							value="${requestScope.userB.userAddress}" onblur="checkAdd();" />
						<div>
							<span id="spAdd"></span>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label for="inputUserConp" class="col-sm-2 control-label">单位</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" name="userCompany"
							id="userCompany" placeholder="单位"
							value="${requestScope.userB.userCompany}" onblur="checkConp();" />
						<div>
							<span id="spConp"></span>
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<button type="submit" class="btn btn-default"
							onclick="return checkAll();">提交</button>
					</div>
				</div>
			</form>

		</div>
	</div>
</body>
</html>